<template>
	<div class="header">
		<router-link to="/">
			<div class="square" v-show="isshow">
				<span class="square-a"></span>
				<span class="iconfont square-b">&#xe613;</span>
			</div>
		</router-link>
		<div class="detail-header" v-show="!isshow" :style="styleOpacity">
			<div class="detail-a">
				<router-link to="/">
					<i class="iconfont">&#xe613;</i>
				</router-link>
				<span>陕西历史博物馆</span>
			</div>
		</div>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				isshow:true,
				styleOpacity:{
					opacity:0
				}
			}
		},
		mounted(){
			window.addEventListener("scroll",()=>{
				let top=document.documentElement.scrollTop;
					if(top>20){
						let opacity=top/200;
						opacity = opacity>1?1:opacity;
						this.styleOpacity = { opacity };
        				this.isshow = false;
					}else{
						 this.isshow = true;
					}
			})
		}
	}
</script>
<style scoped>
	.detail-header a{
		display:block;
	}
	.header{
		position:fixed;
		width:100%;
		z-index:50;
	}
	.detail-header{
		background:#00bcd4;
	}
	.detail-a{
		position:relative;
		height:0.88rem;
	}
	.detail-a i{
		position:absolute;
		left:.2rem;
		top:0;
		display:block;
		color:#fff;
		font-size:0.4rem;
		line-height:0.88rem;
		}
	.detail-a span{
		position:absolute;
		top:0;
		left:50%;
		transform:translate(-50%,0);
		color:#fff;
		display:block;
		font-size:0.32rem;
		line-height:0.88rem;
	}
	.square{
		left: .1rem;
	    top: .1rem;
	    width: .72rem;
	    height: .72rem;
	    line-height: .72rem;
	    position: absolute;
	    font-size: .36rem;
	    color: #fff;
	    text-align: center;
	    z-index:20;
	}
	.square-a{
		display: block;
	    width: .72rem;
	    height: .72rem;
	    background-color: #000;
	    opacity: .5;
	    border-radius: .36rem;
	    line-height: .72rem;
	    border-radius:100%;
	}
	.square-b{
		position: absolute;
	    left: 0;
	    top: 0;
	    display: block;
	    width: .72rem;
	    line-height: .72rem;
	    text-align: left;
	    text-indent: .24rem;
	}
</style>